/* 发布信息设置
 * H5PublicSet.jsx
 */
import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';
import { push } from 'redux-router';


import UploadComponent from '../components/UploadComponent.jsx';

import {listImage} from '../actions/ImageHandleAction';
import {h5PublicSetInfo,h5PublicInfoChange,h5PublicNow,h5OfflineNow,h5SetModal,h5DeleteModal,getH5Categories} from '../actions/h5/H5Action';
import moment from 'moment';

import '../static/css/h5publicSet.css';



//发布成功弹出框
class PublicSuccessPopup extends Component{
	constructor(props){
		super(props);
	}

	componentDidMount(){
		$("#openPublicUrlBtn").unbind('click');
		$("#openPublicUrlBtn").click(function(){
			window.open($("#public_url_suc").val());
		});
	}

	render(){
		return(
			<div id="publicSucPopup" className="ui modal">
			  <div className="header">发布成功</div>
			  <div className="content">
			    <div className="ui grid">
			    	<div className="form-group row">
						<label className="right aligned three wide column control-label">主链接：</label>
						<textarea id="public_url_suc" className="left aligned eight wide column form-control" style={{height:'60px'}} disabled={true} ></textarea>
						<div className="left aligned three wide column">
							<div id="openPublicUrlBtn" className="ui primary button" style={{marginTop:'10px'}}>打开链接</div>
						</div>
					</div>
					<div className="form-group row">
						<label className="right aligned three wide column control-label">微信分享：</label>
						<div className="left aligned ten wide column">
							<div className="panel-collapse">
								<img id="share_icon_suc" style={{display:'block',width:'180px',height:'180px'}} />
								<div style={{marginTop:'10px',marginLeft:'20px'}}>扫一扫马上分享朋友圈</div>
							</div>
						</div>
					</div>
			    </div>
			  </div>
			  <div className="actions">
			    <div className="ui positive right labeled icon button">
			      确认<i className="checkmark icon"></i>
			    </div>
			  </div>
			</div>
		);
	}
}

//设置模版类别
class SetModalCategory extends Component{
	constructor(props){
		super(props);
	}

	componentDidMount(){

	}

	

	render(){
		//this.props.setModalCat(item.id)
		const categories=this.props.h5CategoryList.map(item=>{
			if(item.name!='个性定制'){
				let checked="";
				if(item.id==this.props.modalCatId) checked="checked";
				return (<div className="field" key={item.id}>
					      <div className="ui radio checkbox">
					        <input name="modalCat" checked={checked} type="radio" value={item.id} />
					        <label>{item.name}</label>
					      </div>
					    </div>);
			}
			
		});

		return (
			<div id="setModalCatPopup" className="ui modal">
			  <div className="header">设置模版分类</div>
			  <div className="content">
			    <div className="ui form">
				  <div className="inline fields">
				    <label onClick={()=>alert(1)}>选择分类：</label>
				    {categories}
				  </div>
				</div>
			  </div>
			  <div className="actions">
			  	<div className="ui black button cancel">取消</div>
			    <div className="ui positive right labeled icon button">
			      确认<i className="checkmark icon"></i>
			    </div>
			  </div>
			</div>
		);
	}

}


class PublicHistory extends Component{
	openUrl(url){
		if(window){
			window.open(url);
		}
	}

	render(){
		const imgBase64='data:image/png;base64,'+this.props.public_url_qr;
		const str=this.props.is_modal==1?'更新模版':'设置模版';
		return(
				<div className="ui grid">
					<div className="thirteen wide column">
					    <div className="ui grid">
							<div className="form-group row">
								<label className="right aligned three wide column control-label">发布时间：</label>
								<label className="left aligned ten wide column">{moment.unix(this.props.public_time).format('YYYY-MM-DD HH:mm:ss')}</label>
							</div>
							<div className="form-group row">
								<label className="right aligned three wide column control-label">主链接：</label>
								<textarea className="left aligned eight wide column form-control" style={{height:'60px'}} disabled={true} value={this.props.public_url}></textarea>
								<div className="left aligned three wide column">
									<div className="ui primary button" style={{marginTop:'10px'}} onClick={()=>{this.openUrl(this.props.public_url)}}>打开链接</div>
								</div>
							</div>
							<div className="form-group row">
								<label className="right aligned three wide column control-label">微信分享：</label>
								<div className="left aligned ten wide column">
									<div className="panel-collapse">
										<img src={imgBase64} style={{display:'block',width:'180px',height:'180px'}} />
										<div style={{marginTop:'10px',marginLeft:'20px'}}>扫一扫马上分享朋友圈</div>
									</div>
								</div>
							</div>
							<div className="row">
								<div className="three wide column"></div>
								<div className="ten wide column">
									<div className="ui red button" onClick={()=>this.props.offline()} style={{width:'100px'}}>下线</div>
									<div className="ui green button" onClick={()=>this.props.setModal()} style={{marginLeft:'30px'}}>{str}</div>
									{this.props.is_modal?
										<div className="ui yellow button" onClick={()=>this.props.deleteModal()} style={{marginLeft:'30px'}}>删除模版</div>
										:''}
								</div>
							</div>
						</div>
					</div>
				</div>
		);
	}
}

class H5PublicSet extends Component{
	constructor(props){
		super(props);
	}

	componentDidMount(){
		//上传按钮
		$('#iconUpBtn').popup({
    		popup : $('#iconUploadPopup'),
    		on   : 'click'
  		});
  		//加载数据
  		this.props.dispatch(h5PublicSetInfo(this.props.params.uniqueCode));
		this.props.dispatch(getH5Categories());
	}

	componentWillUnmount(){
		$(".ui.dimmer.modals").find("#publicSucPopup").remove();
		$(".ui.dimmer.modals").find("#setModalCatPopup").remove();
	}

	iconUpBtnClick(){
		this.props.dispatch(listImage(null,null,10));//加载服务器的h5图片
	}

	imgClick(src,imgName){
		this.props.dispatch(h5PublicInfoChange('share_icon',src));
	}

	//修改发布信息
	publicInfoChange(name,value){
		this.props.dispatch(h5PublicInfoChange(name,value));
	}

	//返回编辑
	backToEdit(){
		this.props.dispatch(push(__ROOTPATH__+'h5edit/edit/' + this.props.params.uniqueCode));
	}

	toListPage(){
		this.props.dispatch(push(__ROOTPATH__+'h5edit/index.html'));
	}

	//发布成功弹出发布信息
	popupPublicSuccess(res){
		$("#publicSucPopup").modal({
    		closable  : false,
    		onShow : ()=>{
    			$("#public_url_suc").val(res.public_url);
    			$("#share_icon_suc").attr('src','data:image/png;base64,'+res.public_url_qr);
    		},
		    onApprove : this.toListPage.bind(this)
		}).modal('show');
	}

	//点击发布按钮
	publicBtnClick(){
		//要提交的数据
		const submitData={
			title:this.props.data.title,
			description:this.props.data.description,
			share_icon:this.props.data.share_icon,
			id:this.props.data.id
		}
		this.props.dispatch(h5PublicNow(submitData,this.popupPublicSuccess.bind(this)));
	}
	//点击下线按钮
	offline(){
		this.props.dispatch(h5OfflineNow(this.props.data.id));
	}
	//设置为模版
	setModal(){
		//this.props.dispatch(h5SetModal(this.props.data.id));

		$("#setModalCatPopup").modal({
    		closable  : true,
    		onShow : ()=>{
    			
    		},
		    onApprove : ()=>{
		    	this.props.dispatch(h5SetModal(this.props.data.id,$('input[name=modalCat]:checked').val(),this.toListPage.bind(this)));
		    }
		}).modal('show');
	}
	//删除模版
	deleteModal(){
		this.props.dispatch(h5DeleteModal(this.props.data.id,this.toListPage.bind(this)));
	}

	render(){
		const upCompProps={//上传组件的属性
			width:530,
			height:350,
			showTabs:['image'],//显示的标签页
			imgClick:this.imgClick.bind(this),//设置图片点击事件
			imgListProps:this.imgListProps,  //显示的图片属性信息
			multiple:false   //是否允许多个文件同时上传
		}

		let shareIconSrc='/h5static/images/h5icon.jpg';
		if(this.props.data.share_icon){
			shareIconSrc=this.props.data.share_icon;
		}
		let publicInfo='';
		const publicHistoryInfo={
			public_url:this.props.data.public_url,
			public_time:this.props.data.public_time,
			public_url_qr:this.props.data.public_qr,
			is_modal:this.props.data.is_modal,
			offline:this.offline.bind(this),
			setModal:this.setModal.bind(this),
			deleteModal:this.deleteModal.bind(this)
		}
		if(this.props.data.is_public){
			publicInfo=(
					<div>
						<h2 className="ui attached header">已发布版本</h2>
						<div className="ui attached segment">
				    		<PublicHistory {...publicHistoryInfo}/>
				    	</div>
					</div>
				);
		}
		const modalCatPopProps={
			h5CategoryList:this.props.h5TplCategoryList,
			modalCatId:this.props.data.modal_cat
		}
		return(
			<div style={{margin:'1rem 10rem'}}>
				<h2 className="ui top attached header">发布设置</h2>
			  	<div className="ui attached segment">
				    <div className="ui grid">
				      <div className="thirteen wide column">
				    	<div className="ui grid">
							<div className="form-group row">
								<label className="right aligned three wide column control-label">最后修改时间：</label>
								<label className="left aligned ten wide column">{moment.unix(this.props.data.update_time).format('YYYY-MM-DD HH:mm:ss')}</label>
							</div>

							<div className="form-group row" style={{position:"relative"}}>
								<label htmlFor="title-input" className="right aligned three wide column control-label">分享标题：</label>
								<div className="left aligned ten wide column" style={{width: '453px'}}><input className="form-control" value={this.props.data.title} onChange={(e)=>this.publicInfoChange('title',e.target.value)}/></div>
							</div>
							<div className="form-group four column row">
								<label htmlFor="desc-input" className="right aligned three wide column control-label">分享内容：</label>
								<div className="left aligned eight wide column">
									<textarea placeholder="微信转发消息给好友时显示，可以不填" className="form-control" maxLength="36" style={{height:'80px'}} value={this.props.data.description} onChange={(e)=>this.publicInfoChange('description',e.target.value)}></textarea>
								</div>
								<div className="left aligned four wide column" style={{marginLeft:'-20px',marginTop:'7px'}}>(建议36字以内)</div>
							</div>
							<div className="form-group row">
								<label htmlFor="icon-input" className="right aligned three wide column control-label">分享图标：</label>
								<div className="left aligned thirteen wide column" style={{position:"relative"}}>
									<img src={shareIconSrc} style={{width:'32px',height:'32px'}}  />
									<button id="iconUpBtn" className="ui icon button" style={{position:'absolute',top:'0',left:'60px'}} onClick={()=>this.iconUpBtnClick()}><i className="file image outline icon"></i></button>
									<span style={{position:'absolute',top:'10px',left:'100px'}}>300 * 300 png</span>
								</div>
							</div>
							<div className="row">
								<div className="three wide column"></div>
								<div className="left aligned ten wide column">
									<div className="ui button" style={{width:'120px',marginRight:'50px'}} onClick={()=>this.backToEdit()}>返回编辑</div>
									<div className="ui teal button" style={{width:'120px'}} onClick={()=>this.publicBtnClick()}>发布</div>
								</div>
							</div>
							{/*图标上传*/}
							<div id="iconUploadPopup" className="ui custom popup">
								<UploadComponent {...upCompProps} />
							</div>
						</div>
					  </div>
					  <div className="six wide column"></div>
	                </div>
			    </div>
			    {publicInfo}
		    	<PublicSuccessPopup />
		    	<SetModalCategory {...modalCatPopProps} />
			</div>
		);
	}
}

export default connect((state)=>{ 
		return {
			data:state.app.h5PublicSetInfo,
			h5TplCategoryList:state.app.h5DataList.h5TplCategoryList
		} 
	})(H5PublicSet);
